<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>md0 一个丑陋的markdown解析工具</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/Base64/1.0.2/base64.min.js"></script>
    <link href="https://cdn.bootcss.com/codemirror/5.48.0/codemirror.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/codemirror/5.48.0/codemirror.min.js"></script>
    <script src="https://cdn.bootcss.com/codemirror/5.48.0/mode/javascript/javascript.min.js"></script>
    <script src="https://cdn.bootcss.com/codemirror/5.48.0/mode/css/css.min.js"></script>
    <script src="https://cdn.bootcss.com/codemirror/5.48.0/mode/markdown/markdown.min.js"></script>
    <script id="md0"></script>
    <style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    #css, #markdown, #script, #html {
        height: 50%;
        width: 50%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        padding-top: 33px;
        border: 1px solid #cacaca;
        overflow: hidden;
    }

    .content {
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    #css:before {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        background-color: #8c8c8c;
        color: #FFF;
        content: 'CSS';
        padding: 6px;
    }

    #script:before {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        background-color: #8c8c8c;
        color: #FFF;
        content: 'JAVASCRIPT';
        padding: 6px;
    }

    #markdown:before {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        background-color: #8c8c8c;
        color: #FFF;
        content: 'MARKDOWN';
        padding: 6px;
    }

    #html:before {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        background-color: #8c8c8c;
        color: #FFF;
        content: 'HTML';
        padding: 6px;
    }

    #css, #markdown {
        float: left;
    }

    #script, #html {
        float: left;
    }

    .CodeMirror {
        border: 1px solid #eee;
        height: auto;
    }

    #btn-reload {
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: 60px;
        height: 32px;
    }
    </style>
</head>
<body>
<div id="css">
    <div class="content">
        <textarea class="editor"></textarea>
    </div>
</div>
<div id="script">
    <div class="content">
        <textarea class="editor"></textarea>
    </div>
</div>
<div id="markdown">
    <div class="content">
        <textarea class="editor"></textarea>
    </div>
</div>
<div id="html">
    <iframe class="content"></iframe>
</div>
<button id="btn-reload">更新</button>
<script>
var editors = {
    css: CodeMirror.fromTextArea($('#css .editor').get(0), {
        mode: 'text/css',
        lineNumbers: true,
        height: 'auto'
    }),
    script: CodeMirror.fromTextArea($('#script .editor').get(0), {
        mode: 'text/javascript',
        lineNumbers: true,
        height: 'auto'
    }),
    markdown: CodeMirror.fromTextArea($('#markdown .editor').get(0), {
        mode: 'text/markdown',
        lineNumbers: true,
        height: 'auto'
    })
};

var loadCount = 0

function loaded() {
    if (++loadCount < 3) {
        return
    }
    (new Function(editors.script.getValue()))()
}

$('#btn-reload').click(function () {
    loaded();
});

function fromBase64(content) {
    return decodeURIComponent(escape(atob(content.replace(/\n/g, ''))))
}

function cssCallback(response) {
    editors.css.setValue(fromBase64(response.data.content));
    loaded()
}

function scriptCallback(response) {
    editors.script.setValue(fromBase64(response.data.content));
    loaded()
}

function mdCallback(response) {
    editors.markdown.setValue(fromBase64(response.data.content));
    loaded()
}

function md0Callback(response) {
    $('#md0').html(fromBase64(response.data.content));
}
</script>
<script src="https://api.github.com/repos/hyjiacan/md0/contents/src/md0.js?callback=md0Callback"
        type="text/javascript"
        charset="utf-8"></script>
<script src="https://api.github.com/repos/hyjiacan/md0/contents/src/md0.css?callback=cssCallback"
        type="text/javascript"
        charset="utf-8"></script>
<script src="https://api.github.com/repos/hyjiacan/md0/contents/docs/parser.js?callback=scriptCallback"
        type="text/javascript"
        charset="utf-8"></script>
<script src="https://api.github.com/repos/hyjiacan/md0/contents/docs/sample.md?callback=mdCallback"
        type="text/javascript"
        charset="utf-8"></script>
</body>
</html>
